{include file="public/header"}
		<style type="text/css">
		
			
			.warrantyList{
				width: 100%;
				height: auto;
				padding: 0.4rem 0;
			}
			.warrantyList .lists{
				width: 100%;
				height: auto;
				padding: 0.15rem 0;
				border-bottom: 1px solid #eee;
				position: relative;
			}
			.warrantyList .lists:first-of-type{
				border-top: 1px solid #eee;
			}
			.warrantyList .lists .textBox1{
				width: 100%;
				height: auto;
				font-size: 0.28rem;
				font-weight: bold;
				color: #444;
			}
			.warrantyList .lists .textBox2{
				width: 100%;
				height: auto;
				font-size: 0.24rem;
				padding: 0.12rem 0;
				color: #777;
			}
			.warrantyList .lists .textBox2>span{
				padding-right: 0.15rem;
				padding-left: 0.15rem;
				position: relative;
			}
			.warrantyList .lists .textBox2>span:first-of-type{
				padding-left: 0;
			}
			.warrantyList .lists .textBox2>span:after{
				content: "";
				height: 0.2rem;
				width: 1px;
				background-color: #777;
				position: absolute;
				top: 50%;
				right: 0;
				margin-top: -0.1rem;
			}
			.warrantyList .lists .textBox2>span:last-of-type:after{
				background-color: #fff;
			}
			.warrantyList .lists .moreIcon{
				width: 0.15rem;
				height: 0.15rem;
				position: absolute;
				top: 50%;
				right: 0;
				margin-top: -0.075rem;
			}
			.warrantyList .lists .moreIcon .imgs{
				position: absolute;
				top: 0;
				left: 0;
			}
			
		</style>
	</head>
	<body >
		<div id="index">
			
			<div class="mainPage">
				<div class="contentBoxs">
					<div class="bgBox" :style="{minHeight: winHeight}"></div>
					<div style="position: relative;z-index: 8;">
						<div class="headGoBackBox">
							<div class="backBtn" @click="goBack">
								<div class="goBackI"><img src="/public/static/mobile/image/goBackIcon.png" style="width: 100%;"></div>
								<div class="goBackT">返回</div>
							</div>
							<div style="flex: 1;"></div>
						</div>
						{include file="public/logobox"}
						<div class="boxs1">
							<div class="titleBoxs">维修列表</div>
							<div class="centerBoxs">
								<div class="rows">
									<div class="lab">我的设备名称</div>
									<div class="val">{{deviceName ? deviceName : '暂无'}}</div>
								</div>
								<div class="rows">
									<div class="lab">设备序列号</div>
									<div class="val">{{sn}}</div>
									<div class="val" v-if="allSn != ''" v-for="(item,index) in allSn">{{item}}</div>
								</div>
								<div class="rows">
									<div class="lab">维修次数</div>
									<div class="val">{{dataList.length}}</div>
								</div>
								<div class="rows">
									<div class="lab">
										<div class="tt">维修时间</div>
										<div class="addBtn" v-on:click="addNavigation('/mobile/maintenancelist/add.html?sn='+sn+'&phone='+phone)" v-if="status==0">新增维修</div>
									</div>
									<div class="warrantyList" v-if="dataList.length>0">
										<div class="lists" v-for="item in dataList"  v-on:click="navigation('/mobile/maintenancelist/details.html?id='+item.id+'&sn='+sn)">
											<div class="textBox1 line1" v-if="item.project">{{item.project}}</div>
											<div class="textBox1 line1" v-if="!item.project" style="color: #ff4d4d;">维修中</div>
											<div class="textBox2">
												<span>{{item.personnel ? item.personnel : '暂无维修人'}}</span>
												<span>{{item.telphone ? item.telphone : '暂无手机号'}}</span>
												<span>{{item.date!='1970-01-01' ? item.date : '暂无维修时间'}}</span>
											</div>
											<div class="moreIcon"><img src="/public/static/mobile/image/rightIcon.png" class="imgs"/></div>
										</div>
									</div>
								</div>
							</div>
						</div>
						{include file="public/footerbox"}
					</div>
				</div>
			</div>
			{include file="public/popup"}
		</div>

	
<script type = "text/javascript">
	var real_sn="{$real_sn}";
	new Vue({
	  	el: '#index',
	  	data: function () {
		  	return {
				showstate:false,  //提示窗
		  		toastMsg:"",   //提示窗的文字
		  		winHeight:document.documentElement.clientHeight+"px",
				deviceName:"",  //设备名称
		    	dataList:[
		    		// {	
		    		// 	id:1,
		    		// 	projectName:"线路板",
		    		// 	warrantyName:"王大锤",
		    		// 	warrantyPhone:"18325414574",
		    		// 	warrantyTime:"2021/5/2",
		    		// },
		    		// {
		    		// 	id:2,
		    		// 	projectName:"线路板",
		    		// 	warrantyName:"王大锤",
		    		// 	warrantyPhone:"18325414574",
		    		// 	warrantyTime:"2021/5/2",
		    		// },
		    		// {
		    		// 	id:3,
		    		// 	projectName:"线路板",
		    		// 	warrantyName:"王大锤",
		    		// 	warrantyPhone:"18325414574",
		    		// 	warrantyTime:"2021/5/2",
		    		// },
		    	],
				sn:"",
				real_sn:real_sn,
				status:0,  //维修状态（0：可以维修，1：不可以维修）
				phone:"",  //电话

				
				allSn:[],
				cativeState:0,   //设备保修状态
		  	}
	  	},
		// 创建页面
		created(){
			var _this=this;
			// 获取上一页面的参数


			var texts = decodeURI(window.location.href.split("?")[1]);
			var sn = decodeURI(texts.split("&")[0]);
			var phone = decodeURI(texts.split("&")[1]);
			_this.sn=sn.slice(3);
			_this.phone=phone.slice(6);

		},
	  	//页面加载需要执行的方法
	  	mounted:function(){
        	var _this=this;
			_this.getData();
			_this.getState();
			_this.getAllSn();
			_this.getActiveState();
       },
	  	methods: {
			  //弹窗
	  		popup:function(msg){
	  			var _this=this;
	  			_this.toastMsg=msg;
	  			_this.showstate=true;
	  			setTimeout(()=>{
			        _this.showstate=false;
			    },1500);
	  		},
			  //   返回
			goBack(){
				window.history.back(-1); 
			},
			//   跳转添加页面
			addNavigation:function(url){
	  			console.log(url);
				  if(this.cativeState==3){
					this.popup("该设备保修已过期")
				  }else{
					location.href=url;
				  }
	  			
	  		},
	  		//跳转页面详情
	  		navigation:function(url){
	  			console.log(url);
	  			location.href=url;
	  		},

			// 获取页面数据
			getData:function(){
				var _this=this;
				// console.log( _this.sn)
				axios.get('/api/mobile/fixlist', {
					params: { sn: _this.sn }
				})
				.then(function (res) {
					console.log(res);
					_this.deviceName=res.data.good_name;
					if(res.data.list.length>0){
						_this.dataList=res.data.list;
					}else{
						_this.dataList=[];
					}
					// _this.datas=res.data.info;
				}).catch(function (error) {
					console.log(error);
				});
			},
			// 获取所有的sn
			getAllSn:function(){
				var _this=this;
				// console.log( _this.sn)
				axios.get('/api/mobile/get_namebysn', {
					params: { sn: _this.real_sn }
				})
				.then(function (res) {
					// console.log(res);
					if(res.data.data.sn){
						// _this.allSn=res.data.data.sn;
						var s = res.data.data.sn;
						_this.allSn=s.split(",");
					}else{
						_this.allSn=[];
					}
				}).catch(function (error) {
					console.log(error);
				});
			},

			//判断是否允许新增
			getState:function(){
				var _this=this;
				// alert("123");
				axios.get('/api/mobile/get_fix_status')
				.then(function (res) {
					// console.log(res);
					_this.status=res.data.status;
					// alert(res);
				}).catch(function (error) {
					console.log(error);
				});
			},

			getActiveState(){
				// alert("AAA")
				// location.reload();
				var _this=this;
				axios.get('/api/mobile/getActive', {
					params: { sn: _this.real_sn }
				})
				.then(function (res) {
					console.log("保修状态：",res);
					if(res.data.status==1){
						// var status1=res.data.status;

						_this.cativeState=res.data.info;

						// if(status1==0){
						// 	_this.activeState=false;
						// 	_this.activeState1=0;   //未激活
						// }else if(status1==1){
						// 	_this.activeState1=1;   //未激活
						// 	var status2=res.data.info;
						// 	_this.activeStateInfo=res.data.info;
						// 	if(status2==0){
						// 		_this.activeState=false;   //激活失败
						// 	}else if(status2==1){    //激活成功
						// 		_this.activeState=true;
						// 	}else if(status2==2){   //审核中
						// 		_this.activeState=true;
						// 	}else if(status2==3){   //已过期
						// 		_this.activeState=true;
						// 	}
						// }
					}else{
						// _this.popup(res.data.msg);
					}
				}).catch(function (error) {
						console.log(error);
				});
			},

			
	  		
	  	},
	})
</script>
{include file="public/footer"}
